<template>
  <div class="code-management pd-20">
    <el-row>
      <el-col :span="20">
        <el-form :inline="true">
          <el-form-item label="试纸名称:">
            <el-input v-model="searchParams.testStripName"
                      placeholder="请输入试纸名称"
                      @clear="handleQuery"
                      class="w-200"></el-input>
          </el-form-item>
          <el-form-item label="生产厂家:">
            <el-input v-model="searchParams.factoryName"
                      placeholder="请输入生产厂家"
                      @clear="handleQuery"
                      class="w-200"></el-input>
          </el-form-item>
          <el-form-item label="开始日期时间:">
            <el-date-picker v-model="searchParams.startTime"
                            type="datetime"
                            @change="handleQuery"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择开始日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期时间:">
            <el-date-picker v-model="searchParams.endTime"
                            type="datetime"
                            @change="handleQuery"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择结束日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button type="primary"
                   @click="handleQuery">查 询</el-button>
        <el-button type="warning"
                   @click="handleRowClick(null, 'add')">code码管理</el-button>
      </el-col>
    </el-row>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="success"
                   @click="handleRowClick(row, 'detail')">详情</el-button>
        <el-button type="primary"
                   @click="handleRowClick(row, 'edit')">编辑</el-button>
        <el-button type="danger"
                   @click="handleRowClick(row, 'del')">删除</el-button>
      </template>
    </element-table>
    <code-dialog :codeObj="codeObj"
                 :isDetail="isDetail"
                 :visible.sync="isCode"
                 v-if="isCode"></code-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  import codeDialog from './codeDialog'
  export default {
    name: 'codeManagement', // code码管理
    data () {
      return {
        searchParams: {
          testStripName: '',
          factoryName: '',
          startTime: null,
          endTime: null,
        },
        loading: false,
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        columns: [
          {
            label: '试纸名称',
            prop: 'testStripName'
          },
          {
            label: '生产厂家',
            prop: 'factoryName'
          },
          {
            label: '规格',
            prop: 'standardNum',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.standardNum + row.standardUnit
            },
          },
          {
            label: '包装单位',
            prop: 'packageNum',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.packageNum + row.packageUnit
            },
          },
          {
            label: '数量（盒）',
            prop: 'num',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.num + row.numUnit
            },
          },
          {
            label: '总条数',
            prop: 'totalNum',
            align: 'center',
          },
          {
            label: '生成日期',
            prop: 'createTime',
            align: 'center',
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            width: 220,
            label: '操作',
            align: 'center',
            prop: 'option',
            isSlot: true
          }
        ],
        tableData: [],
        codeObj: {},
        isCode: false,
        isDetail: false  // 查看详情
      }
    },
    methods: {
      handleQuery() {
        this.pageIndex = 1
        this.getList()
      },
      // 列表
      async getList () {
        this.loading = true
        const { data: res } = await this.post(this.api.testStrip.getTestStripOrderPage, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          ...this.searchParams
        })
        if (res.code === '200') {
          this.loading = false
          this.tableData = res.object
          this.pageTotal = res.totalNum
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page
        this.getList()
      },
      // 操作
      async handleRowClick (row, op) {
        this.isDetail = false;
        switch (op) {
          case 'add':
            this.codeObj = null
            this.isCode = true;
            break;
          case 'detail':
            this.codeObj = row
            this.isDetail = true;
            this.isCode = true;
            break;
          case 'edit':
            this.codeObj = row
            this.isCode = true;
            break
          case 'del':
            const { data: res } = await this.post(this.api.testStrip.getOrderNum, {
              testStripId: row.testStripId,
              factoryId: row.factoryId,
              batchId: row.batchId,
              standardNum: row.standardNum,
              standardUnit: row.standardUnit,
              packageNum: row.packageNum,
              packageUnit: row.packageUnit,
              numUnit: row.numUnit,
              detailId: '',
            })
            if (res.code === '200') {
              if (res.object.deliveredNum > 0) {
                return this.$message.error('存在发货，不能删除!')
              }
              this.$confirm('确认删除？')
                .then(async _ => {
                  const { data: result } = await this.post(this.api.testStrip.deleteTestStripOrder, {
                    id: row.id
                  })
                  if (result.code === '200') {
                    this.$message.success('删除成功!')
                    this.getList()
                  } else {
                    this.$message.error(result.message)
                  }
                })
                .catch(_ => { });
            }
            break
        }
      }
    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable,
      'code-dialog': codeDialog
    }
  }
</script>
<style scoped lang="scss">
</style>
